import React, { Component } from 'react'
import PropTypes from 'prop-types'

// function ChildA (props,ctx){
  
//   console.log(ctx)

//   return (<>

//   b:{ctx.b}
//   <ChildB {...props}/>
//   </>)
// }
// ChildA.contextTypes = {
//   b:PropTypes.number,
// }


 class ChildA extends Component {
  constructor(props,ctx){
    super(props,ctx)
    console.log(props)
    console.log(ctx)
    console.log(this.context)
  }
  static contextTypes = {
    b:PropTypes.number,
  }
  static childContextTypes = {
    a:PropTypes.number,
    b:PropTypes.number,
    c:PropTypes.number,
  }
  // state = {
  //   a: 1,
  //   b:2
  // }
  /**
   * 得到上下文中的数据
   * @returns 
   */
  getChildContext(){
    console.log('获取上下文的数据')
    return {
      a:12222,
      b:3,
      c:4
    }
  }
  render() {
    return (<>

        b:{this.context.b}
        <ChildB {...this.props}/>
        </>)
  }
}

// ChildA.childContextTypes={
//   a:PropTypes.number,
//   b:PropTypes.number,
//   c:PropTypes.number,
// }
class ChildB extends Component {
  /**
   * 声明需要使用哪些上文的数据
   */
  static contextTypes = {
    a:PropTypes.number,
  }
  constructor(props,ctx){
    super(props,ctx)
    console.log(props)
    console.log(ctx)
    console.log(this.context)
  }
  render(){
    return  <>
      {/* {...props} */}
      上下文数据a:{this.context.a}
      <button onClick={
       ()=>{ this.props.Aadd()}
      }>
                子组件控制a + 1
      </button>
      </>
  }
    
}
export default class OldContext extends Component {

  static childContextTypes = {
    a:PropTypes.number,
    b:PropTypes.number
  }
  state = {
    a: 1,
    b:2
  }
  /**
   * 得到上下文中的数据
   * @returns 
   */
  getChildContext(){
    console.log('获取上下文的数据')
    return {
      a:this.state.a,
      b:this.state.b
    }
  }
  constructor(props){
    super(props)
    console.log('入口')

  }
  componentDidMount(){
    console.log('渲染结束',this)
    
  }
  render() {
    console.log('render')
    return (
      <div>OldContext
        <ChildA Aadd={()=>{
           this.setState({
            a:this.state.a + 1
          })
        }}/>
        <button onClick={
          ()=>{
            this.setState({
              a:this.state.a + 1
            })
          }
        }>
          a+1
        </button>
        <button onClick={
          ()=>{
            this.setState({
              b:this.state.b + 1
            })
          }
        }>
          b
        </button>
      </div>
    )
  }
}
